<template>
  <div class="person">
    <h2>当前水温: {{ temp }} ℃</h2>
    <h2>当前水位: {{ height }} cm</h2>
    <button @click="changeTemp">点我水温+10</button>
    <button @click="changeHeight">点我水位+10</button>
  </div>
</template>
<script lang="ts" setup>
import { ref, watch, watchEffect } from 'vue'
// watEffect
// 官网：立即运行一个函数，同时响应式地追踪其依赖，并在依赖更改时重新执行该函数
// watch 对比 watchEffect
// 1、都能监听响应式数据的变化，不同的是监听数据变化方式不同
// 2、watch：要明确指出监视的数据
// 3、watchEffect：不用明确指出监视的数据(函数中用到哪些属性，那就监视哪些属性)
let temp = ref(0)
let height = ref(0)
function changeTemp() {
  temp.value += 10
}
function changeHeight() {
  height.value += 10
}
// 使用watch监视
// watch([temp,height],(newVal,oldVal)=>{
//   const [newTemp,newHeight] = newVal
//   if(newTemp >= 60 || newHeight >= 80){
//     console.log('我已经向服务器发送请求了');
//   }
// })
// 使用watchEffect监视
watchEffect(() => {
  if (temp.value >= 60 || height.value >= 80) {
    console.log('我已经向服务器发送请求了', temp.value, height.value)
  }
})
</script>
<style>
button {
  margin-left: 10px;
}
</style>
